<template>
  <div>
    <div class="row">
      <div class="flex-center">
        <el-tooltip
          class="box-item"
          effect="dark"
          raw-content
          :content="promptMessage.totalMemoryUsageInBytes"
          placement="right"
          ><SvgIcon class="tooltip-icon" icon="explain" />
        </el-tooltip>
        GPU 内存占用:
        {{ totalMemoryUsageInBytes }}
      </div>
    </div>
    <div class="row">
      <div class="flex-center">
        <el-tooltip
          class="box-item"
          effect="dark"
          raw-content
          :content="promptMessage.lastFramesPerSecond"
          placement="right"
          ><SvgIcon class="tooltip-icon" icon="explain" />
        </el-tooltip>
        帧率:
        {{ store.frameRate }}
      </div>
    </div>
    <div class="row">
      <div class="flex-center">
        <el-tooltip
          class="box-item"
          effect="dark"
          raw-content
          :content="promptMessage.debugShowGeometricError"
          placement="right"
        >
          <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
        >debugShowGeometricError:
        <el-checkbox
          @change="onChangeProperty($event, 'debugShowGeometricError')"
          v-model="inputData.debugShowGeometricError"
          size="small"
        />
      </div>
    </div>
    <div class="row">
      <div class="flex-center">
        <el-tooltip
          class="box-item"
          effect="dark"
          raw-content
          :content="promptMessage.debugShowRenderingStatistics"
          placement="right"
        >
          <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
        >debugShowRenderingStatistics:
        <el-checkbox
          @change="onChangeProperty($event, 'debugShowRenderingStatistics')"
          v-model="inputData.debugShowRenderingStatistics"
          size="small"
        />
      </div>
    </div>
    <div class="row">
      <div class="flex-center">
        <el-tooltip
          class="box-item"
          effect="dark"
          raw-content
          :content="promptMessage.debugShowMemoryUsage"
          placement="right"
        >
          <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
        >debugShowMemoryUsage:
        <el-checkbox
          @change="onChangeProperty($event, 'debugShowMemoryUsage')"
          v-model="inputData.debugShowMemoryUsage"
          size="small"
        />
      </div>
    </div>
    <div class="row">
      <div class="flex-center">
        <el-tooltip
          class="box-item"
          effect="dark"
          raw-content
          :content="promptMessage.debugShowUrl"
          placement="right"
        >
          <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
        >debugShowUrl:
        <el-checkbox
          @change="onChangeProperty($event, 'debugShowUrl')"
          v-model="inputData.debugShowUrl"
          size="small"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  defineProps,
  defineEmits,
  defineExpose,
  ref,
  reactive,
  computed,
} from "vue";
import { getTileById } from "../../../../../../static/CIM/BQGIS-load/index";
import SvgIcon from "../../../../../components/SvgIcon.vue";
import { ElMessage } from "element-plus";
import { useStore } from "../../../../../store/store";

const store = useStore();
const props = defineProps({
  tileId: {
    type: String,
  },
});
const inputData = reactive({});
const totalMemoryUsageInBytes = ref("");

defineExpose({ inputData });

let currentLayer = null;
let tileset = null;

const promptMessage = {
  totalMemoryUsageInBytes:
    "瓦片集使用的 GPU 内存总量。这个值是根据几何、纹理、批处理表纹理和加载的切片的二进制元数据估计的。",
  lastFramesPerSecond:
    "获取最近的平均帧数。如果尚未计算帧速率，则此属性可能未定义。",
  debugShowGeometricError:
    "仅用于调试。如果为 true，则绘制标签以指示每个图块的几何误差",
  debugShowRenderingStatistics:
    "仅用于调试。如果为 true，则绘制标签以指示每个图块的命令、点、三角形和特征的数量。",
  debugShowMemoryUsage:
    "仅用于调试。如果为 true，则绘制标签以指示每个图块使用的纹理和几何内存（以兆字节为单位）。",
  debugShowUrl: "仅用于调试。如果为 true，则绘制标签以指示每个图块的 url。",
};

init();

// 显卡信息
// const webgl = viewer.canvas.getContext("experimental-webgl");
// const info = webgl.getExtension("WEBGL_debug_renderer_info");
// const msg = webgl.getParameter(info.UNMASKED_RENDERER_WEBGL);
// console.log(msg);

function memoryMonitoring(tile) {
  const size = tileset.totalMemoryUsageInBytes;
  totalMemoryUsageInBytes.value = formatSizeInBytes(
    tileset.totalMemoryUsageInBytes
  );
}

function formatSizeInBytes(size) {
  if (!size) return "";
  const num = 1024.0; //byte
  if (size < num) {
    return size + " B";
  } else if (size < Math.pow(num, 2)) {
    return (size / num).toFixed(5) + " KB"; //kb
  } else if (size < Math.pow(num, 3)) {
    return (size / Math.pow(num, 2)).toFixed(5) + " MB";
  } else if (size < Math.pow(num, 4)) {
    return (size / Math.pow(num, 3)).toFixed(5) + " G"; //G
  } else {
    return (size / Math.pow(num, 4)).toFixed(5) + " T";
  }
}

onUnmounted(() => {
  tileset.tileLoad.removeEventListener(memoryMonitoring);
  tileset.tileUnload.removeEventListener(memoryMonitoring);
});

function init() {
  currentLayer = getTileById(props.tileId);
  if (!currentLayer) return;
  tileset = currentLayer.tileset;
  tileset.tileLoad.addEventListener(memoryMonitoring);
  tileset.tileUnload.removeEventListener(memoryMonitoring);
  inputData.debugShowGeometricError = tileset.debugShowGeometricError;
  inputData.debugShowRenderingStatistics = tileset.debugShowRenderingStatistics;
  inputData.debugShowMemoryUsage = tileset.debugShowMemoryUsage;
  inputData.debugShowUrl = tileset.debugShowUrl;
}

function onChangeProperty(value, key) {
  tileset[key] = value;
  if (viewer.scene.requestRenderMode) {
    viewer.scene.requestRender();
  }
}
</script>

<style lang="scss" scoped>
.tooltip-icon {
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  margin-right: 3px;
}
.row {
  color: #fff;
  margin: 15px 0;
  .row-input {
    margin-left: 20px;
  }
  .flex-center {
    display: flex;
    align-items: center;
  }
}
.card {
  background-color: rgba($color: #000, $alpha: 0.4);
  margin: 10px;
  padding: 2px 10px;
}
.el-col {
  display: flex;
  align-items: center;
}
</style>